<template>
	<view class="rectify-container">
		<van-tabs @change="changeTab" color="#42ADFF" animated :lazy-render="false" :active="active">
			<van-tab :title-style="active == 0 ? 'color: #42ADFF' : ''" title="进行中">
				<rectify-item v-if="handleList.length !== 0" :rectifyList="handleList"></rectify-item>
				<view v-else>
					<van-empty description="暂无任务" />
				</view>
			</van-tab>
			<van-tab :title-style="active == 1 ? 'color: #42ADFF' : ''" title="待审核">
				<rectify-item v-if="reviewedList.length !== 0" :rectifyList="reviewedList"></rectify-item>
				<view v-else>
					<van-empty description="暂无任务" />
				</view>
			</van-tab>
			<van-tab :title-style="active == 2 ? 'color: #42ADFF' : ''" title="已超时">
				<rectify-item v-if="overtimeList.length !== 0" :rectifyList="overtimeList"></rectify-item>
				<view v-else>
					<van-empty description="暂无任务" />
				</view>
			</van-tab>
			<van-tab :title-style="active == 3 ? 'color: #42ADFF' : ''" title="已完成">
				<rectify-item v-if="completeList.length !== 0" :rectifyList="completeList"></rectify-item>
				<view v-else>
					<van-empty description="暂无任务" />
				</view>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	import RectifyItem from "../components/rectifyItem.vue";
	import dayjs from "dayjs";
	import { mapState } from 'vuex'
	export default {
		components: {
			RectifyItem,
		},
		data() {
			return {
				active: 0,
				params: {
					所属网格id: null,
					网格员: null,
					整改状态: 0,
					网格长id: null,
					sorter: { field: "id", order: 1 }
					// pagination: { current: 1, pageSize: 10 },
					// sorter: { field: "id", order: 1 },
				},
				handleList: [],
				completeList: [],
				overtimeList: [],
				reviewedList: [],
			};
		},
		onLoad() {
			this.params.所属网格id = uni.getStorageSync("gridInfo").网格id;
			this.params.网格员 = uni.getStorageSync("gridInfo").人员姓名;
			this.getRectifyTask();
		},
		computed: {
			...mapState(['personType'])
		},
		methods: {
			changeTab(name) {
				this.active = name.target.index;
			},
			getRectifyTask() {
				uni.showLoading({
					mask: true
				})
				if(this.personType == 1) {
					this.params.网格长id = uni.getStorageSync('gridInfo').id
					this.params.网格员 = null
				}
				this.$http.post("gridSystem/check/solveList", this.params).then((res) => {
					if (res.code === 10000) {
						console.log(res);
						if (res.data.list !== null) {
							res.data.list.forEach((item) => {
								item.整改开始日期 = dayjs(item.整改开始日期).format("YYYY-MM-DD");
							});
						}
						this.handleList = res.data.list.filter((item) => item.整改状态 == 2);
						console.log(this.handleList)
						this.completeList = res.data.list.filter(
							(item) => item.整改状态 === 1
						);
						this.overtimeList = res.data.list.filter(
							(item) => item.整改状态 === 3
						);
						this.reviewedList = res.data.list.filter(
							(item) => item.整改状态 == 4
						);
						console.log(res.data);
					}
				});
			},
		},
	};
</script>

<style lang="scss">
	.rectify-container {
		background-color: #f5f5f5;
		// padding-bottom: 20rpx;
	}
</style>
